第一次写文章记录自己的踩坑记录
我们小程序的客户说商品生成的海报有点模糊，因为之前都是后台生成的，没有办法设置清晰度参数，所以需要换一种生成方式，之前也看过wxml-to-canvas，但是一直没机会好好研究用上，这次机会来了，踩新坑的机会来了。官方地址在此
1.根据官网提示安装npm install --save wxml-to-canvas一定要构建npm
2.引入组件首先在你要用的页面json里引入
"usingComponents": { "wxml-to-canvas": "wxml-to-canvas" }这里要注意的是，在引入的时候可能会报错，显示路径错误，原因是在miniprogram_npm文件夹下没找到相应的文件，但是在node包里是有的，然后我把官方demo里miniprogram_npm文件下的文件直接copy过来就可以用了。
在wxml文件里引入
这里要注意的点是，在外层不能用wx:if来包裹它，hidden也不行，css的display:none也不行，因为我们要做的是生成海报，所以canvas必须在页面上，但是不能显示出来，最后点击生成海报的时候直接导出图片，这时候可以用定位把canvas定位出页面就行了。
3. 对Js的封装引入首先我是在一个名为util的js里封装了wxml以及style,以及wxml的动态传值方式
const wxml = (name,share_img,qrcode_img)=>{ return ``+name+``}const style = { container: { width: 300, height: 456, backgroundColor: '#fff', }, itemBox: { width: 300, height: 260, alignItems: 'center', }, itemBox2:{ width: 300, height: 50, alignItems: 'center', marginTop:20 }, itemBox3:{ width: 300, height: 120, alignItems: 'center' }, img:{ width:270, height:251, marginTop:15 }, img2:{ width:100, height:100, }, text: { width: 260, height: 40, textAlign: 'center', fontSize:14, marginTop:5, lineHeight:'1.1em', scale:1 }}module.exports = { wxml,style}2.在需要用的js里进行引入,路径改成你们自己的就可以用
const { wxml, style} = require('../../../../utils/util.js')3.在onload写入
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this;this.widget = this.selectComponent('.widget');/** * 以下这种写法是我看其他博客有遇到这种情况，需要做延迟才能设置成功。 * 因为当页面没有渲染出来的时候，是拿不到这个节点的 * 如果有这种问题可以试一下 * 时间自己定，能拿到就行 *//** setTimeout(function(){that.widget = that.selectComponent('.widget');},1000) */},3.我们的需求是生成商品海报，里面是有小程序码的，所以我需要先请求接口给我二维码，然后我拿二维码和商品的信息去写到模板里
/***以下代码是写在我调小程序码接口的回调里*/const _wxml = wxml(参数1, 参数2,参数3)const p1 = that.widget.renderToCanvas({wxml: _wxml,style})p1.then((res) => {that.container = res;const p2 = that.widget.canvasToTempFilePath()p2.then(res => {that.setData({src: res.tempFilePath,width: that.container.layoutBox.width,height: that.container.layoutBox.height,},function(){wx.hideLoading();})}).catch(fail => {wx.hideLoading();wx.showToast({icon: 'error',title: '请稍后再试',})})}).catch(fail => {wx.hideLoading();wx.showToast({icon: 'error',title: '请稍后再试',})})4.调试这时候功能基本上就开发好了，开发工具上生成的妥妥的，清晰度也比后台生成的清晰度多了，然后我去真机上瞅了一眼，得，报错了
fail canvas has not been created在一顿操作下可以说是，找到原因了，但没完全找到，在onload里的设置并未生效，设置延迟也不管用，各种查资料，逛社区，愣是没遇到和我情况一样的。正在心态快蹦了的时候，突然想到体验版还没试过呢，抱着赌一把的心态，点击了上传。
哈哈哈哈，体验版没问题。
上线！
虽然还没找到具体是什么原因
但是不影响用户使用
第一次写文章，有点紧张，如有疏漏，欢迎补充。